import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  state = {
    tN: '', // 这个状态用于控制编辑文本框的内容
  }
  // 删除按钮的事件处理函数
  delHandle = () => {
    // 1. 弹窗询问用户是否确定要删除,确认confirm返回值为true,取消返回值为false
    if (!confirm('确定要删除吗?')) return

    // 2. 通知app组件删除数据,并且传递要删除的数据的id
    this.props.delTodo(this.props.todo.id)
  }

  // 编辑按钮的事件处理函数
  editHandle = () => {
    // 通知app组件,修改editId的值
    this.props.setEditId(
      this.props.editId !== this.props.todo.id ? this.props.todo.id : undefined
    )
    // 将当前任务的任务名,赋值给tN.让编辑文本框展示任务名
    this.setState({
      tN: this.props.todo.todoName,
    })
  }
  render() {
    // 从props对象中解构todo
    const {
      // todo也是一个对象.从todo中解构其他三个数据
      todo: { id, todoName, isDone },
      editId,
    } = this.props

    return (
      <li>
        {editId !== id ? (
          <label>
            {/* 注意: 一个表单元素如果值被赋值了.则必须配合一个onChange事件. 否则会警告 */}
            <input
              type="checkbox"
              checked={isDone}
              onChange={(e) => {
                // 注意: 虽然checked被赋值了,用户点击视觉上没有变化,但是我们在代码中是可以获取到目标值的
                // console.log('change', e.target.checked)
                // 调用app的函数,通知app修改数据
                this.props.updateTodo(this.props.todo.id)
              }}
              // onClick={() => {
              //   console.log('click')
              // }}
            />
            <span className={isDone ? 'done' : ''}>{todoName}</span>
          </label>
        ) : (
          // 编辑的文本框
          <input
            type="text"
            // value的值被当前组件的状态控制了,所以用户无法在文本框中输入内容
            value={this.state.tN}
            onChange={(e) => {
              // 写这个onChange的目的是为了在文本框中显示用户输入的内容
              // 原理: 通过e.target.value拿到用户输入,然后赋值给状态tN,tN的值是什么,则文本框就渲染什么
              this.setState({
                tN: e.target.value.trim(),
              })
            }}
            onKeyUp={(e) => {
              // 不是回车键,或者输入的内容为空,则什么都不干
              if (e.key !== 'Enter' || !this.state.tN) return
              // 通知app组件修改指定任务的任务名
              this.props.editTodo(id, this.state.tN)
            }}
          />
        )}
        <button className="btn btn-danger" onClick={this.delHandle}>
          删除
        </button>
        <button className="btn btn-edit" onClick={this.editHandle}>
          {editId !== id ? '编辑' : '取消'}
        </button>
      </li>
    )
  }
}
